<template>
  <div class="error-container">
    <div class="error-content animate__animated" :class="animationClass">
      <div class="error-text">
        <div class="error-code">{{ errorCode }}</div>
        <div class="error-title">{{ errorTitle }}</div>
        <div class="error-description">
          {{ errorDescription }}
          <br />请检查网址是否正确，或返回首页继续浏览。
        </div>
        <div class="error-actions">
          <el-button type="primary" size="large" round class="home-btn" @click="onGoHome">
            <el-icon><HomeFilled /></el-icon>
            返回首页
          </el-button>
          <el-button type="default" size="large" round class="feedback-btn" @click="onFeedback">
            <el-icon><Message /></el-icon>
            反馈问题
          </el-button>
        </div>
      </div>
      <div class="error-illustration">
        <img :src="errorImage" :alt="`${errorCode} Illustration`" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElMessageBox, ElMessage } from 'element-plus';
  import { HomeFilled, Message } from '@element-plus/icons-vue';

  const props = defineProps({
    code: {
      type: String,
      default: '404',
    },
  });

  const errorMessages = {
    '403': {
      title: '访问被拒绝',
      description: '抱歉，您没有权限访问此页面。',
      image: 'https://qny.acxjz.cn/2024/07/24/66a0c4f0a3695.png',
    },
    '404': {
      title: '页面未找到',
      description: '抱歉，您访问的页面似乎已经不存在或暂时无法访问。',
      image: 'https://qny.acxjz.cn/2024/07/24/66a0c4f0a3695.png',
    },
    '500': {
      title: '服务器错误',
      description: '抱歉，服务器出现了一些问题。',
      image: 'https://qny.acxjz.cn/2024/07/24/66a0c4f0a3695.png',
    },
  };

  const router = useRouter();
  const animationClass = ref('animate__fadeIn');

  const errorCode = computed(() => props.code);
  const errorTitle = computed(() => errorMessages[props.code]?.title || '未知错误');
  const errorDescription = computed(() => errorMessages[props.code]?.description || '发生了一些未知错误。');
  const errorImage = computed(() => errorMessages[props.code]?.image || errorMessages['404'].image);

  const onGoHome = () => {
    animationClass.value = 'animate__fadeOut';
    setTimeout(() => {
      router.push('/');
    }, 500);
  };

  const onFeedback = async () => {
    try {
      const { value } = await ElMessageBox.prompt('请描述您遇到的问题', '问题反馈', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        inputType: 'textarea',
        inputPlaceholder: '请详细描述您遇到的问题...',
      });

      if (value) {
        // TODO: 实际项目中需要调用后端API提交反馈
        console.log('Feedback submitted:', value);
        ElMessage.success('感谢您的反馈！');
      }
    } catch (err) {
      // 用户取消操作
    }
  };
</script>

<style scoped lang="scss">
  .error-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #1a1c2e 0%, #2d3047 100%);
    overflow: hidden;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at center, rgba(74, 144, 226, 0.05) 0%, transparent 70%);
      z-index: 1;
      animation: pulse 4s ease-in-out infinite;
    }

    .error-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 1000px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 20px;
      box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.05),
        0 5px 15px rgba(0, 0, 0, 0.03);
      padding: 50px;
      z-index: 2;
      animation-duration: 0.5s;
    }

    .error-text {
      flex: 1;
      padding-right: 50px;

      .error-code {
        font-size: 120px;
        font-weight: 700;
        background: linear-gradient(45deg, #4a90e2, #6a11cb);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        -webkit-text-fill-color: transparent;
        margin-bottom: 20px;
        line-height: 1;
        animation: slideIn 0.5s ease-out;
      }

      .error-title {
        font-size: 36px;
        color: #2c3e50;
        margin-bottom: 15px;
        font-weight: 600;
        animation: slideIn 0.5s ease-out 0.2s both;
      }

      .error-description {
        color: #6c757d;
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 30px;
        animation: slideIn 0.5s ease-out 0.4s both;
      }

      .error-actions {
        display: flex;
        gap: 15px;
        animation: slideIn 0.5s ease-out 0.6s both;

        .home-btn,
        .feedback-btn {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 24px;
          font-size: 16px;
          transition: all 0.3s ease;
        }

        .home-btn {
          background: linear-gradient(135deg, #4a90e2, #6a11cb);
          border: none;
          color: white;

          &:hover {
            transform: translateY(-3px);
            box-shadow:
              0 7px 14px rgba(50, 50, 93, 0.1),
              0 3px 6px rgba(0, 0, 0, 0.08);
          }
        }

        .feedback-btn {
          border-color: #4a90e2;
          color: #4a90e2;

          &:hover {
            background-color: rgba(74, 144, 226, 0.05);
          }
        }
      }
    }

    .error-illustration {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      animation: float 6s ease-in-out infinite;

      img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.1));
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.05);
        }
      }
    }
  }

  @keyframes pulse {
    0%,
    100% {
      transform: scale(1);
      opacity: 0.3;
    }
    50% {
      transform: scale(1.1);
      opacity: 0.6;
    }
  }

  @keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
</style>
